<template>
  <!-- 新增录入画面对话框-->
  <el-dialog
    title="银行票据签发录入"
    center
    width="1024px"
    :visible.sync="open"
    :close-on-click-modal="false"
    @close="closeFn"
  >
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="110px" :disabled="disabled">
      <div slot="header" class="label-header-msg">
        <span>账户信息录入</span>
      </div>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="出票行行号：" prop="issuedBrno">
            <el-input v-model="submitParams.issuedBrno" @change="getBankInf('issuedBrno', submitParams.issuedBrno)"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('issuedBrno')">
              行名行号查询
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="出票行行名：" prop="issuedBrname">
            <el-input v-model="submitParams.issuedBrname" :disabled="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="出票日期：" prop="issuedDate">
            <el-date-picker
              v-model="submitParams.issuedDate"
              type="date"
              value-format="yyyyMMdd"
              placeholder=""
              style="width: 100%"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="票据类型：" prop="draftType">
            <el-select style="width: 100%" v-model="submitParams.draftType" placeholder="">
              <el-option
                v-for="dict in dictMap.DRAFT_TYPE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="票据种类：" prop="draftCode">
            <el-select style="width: 100%" v-model="submitParams.draftCode" placeholder="">
              <el-option
                v-for="dict in dictMap.DRAFT_CODE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="申请人账号：" prop="issuedActno">
            <acct-no-input
              v-model="submitParams.issuedActno"
              placeholder="申请人账号"
              @keyup.enter.native="getActNoInfo"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-button icon="el-icon-search" plain type="primary" @click="openPayerDialog('issuedActno')">
              账号查找
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请人名称：" prop="issuedName">
            <el-input v-model="submitParams.issuedName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收款人名称：" prop="payeeName">
            <el-input v-model="submitParams.payeeName"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出票金额：" prop="issuedAmount">
            <ht-amount-input
              v-model="submitParams.issuedAmount"
              placeholder="出票金额"
            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="提示付款日期：" prop="promptDate">
            <el-date-picker
              v-model="submitParams.promptDate"
              type="date"
              value-format="yyyyMMdd"
              placeholder=""
              style="width: 100%"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="备注：" prop="remarks">
            <el-input type="textarea" v-model="submitParams.remarks" show-word-limit maxlength="768"/>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="this.submitParams.draftType == '0'">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="代理付款行行号：" prop="agentBrno">
              <el-input v-model="submitParams.agentBrno" @change="getBankInf('agentBrno', submitParams.agentBrno)"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('agentBrno')">
                行名行号查询
              </el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="代理付款行行名：" prop="agentBrname">
              <el-input v-model="submitParams.agentBrname" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="isLoading" v-if="!isSubmit">提交</el-button>
      <el-button type="warning" @click="refresh" :loading="isLoading">重置</el-button>
      <el-button @click="closeFn">取消</el-button>
    </div>
    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
    <payer-dialog ref="payerDialog" @confirm="confirmPayer"></payer-dialog>
  </el-dialog>
</template>

<script>
import {submit, query} from "@/api/cnaps/bepsDraft/bank_note_issuance_entry.js";
import {listPageMixin} from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import {getBankInfByBankCode} from "@/api/cnaps/common/bankInfo";
import HtAmountInput from "@/views/components/HtAmountInput/index.vue";
import { milliSendToDate } from "@/utils/common";
import AcctNoInput from "@/views/components/AcctNoInput";
import { getCustByActno } from "@/api/cnaps/common/custInfo";
import PayerDialog from "@/views/components/PayerDialog";

export default {
  name: "BankNoteIssuanceEntryDialog",
  mixins: [listPageMixin],
  components: { PayerDialog, AcctNoInput, HtAmountInput, BankBranchDialog},
  computed: {},
  data() {
    return {
      // 是否显示弹出层
      open: false,
      disabled: false,
      isSubmit: false,
      queryData: {},
      isLoading: false,
      // 录入参数
      submitParams: {
        issuedBrno: "",
        issuedBrname: "",
        issuedDate: "",
        draftType: "",
        draftCode: "",
        issuedActno: "",
        issuedName: "",
        payeeName: "",
        issuedAmount: "",
        promptDate: "",
        remarks: "",
        agentBrno: "",
        agentBrname: "",
      },
      searchFormDictList: ["DRAFT_TYPE", "DRAFT_CODE"],
      rules: {
        issuedBrno: [{required: true, message: "不能为空", trigger: "change"}],
        draftType: [{required: true, message: "不能为空", trigger: "change"}],
        draftCode: [{required: true, message: "不能为空", trigger: "change"}],
        issuedActno: [{required: true, message: "不能为空", trigger:  ['blur', 'change']}],
        issuedName: [{required: true, message: "不能为空", trigger: "blur"}],
        payeeName: [{required: true, message: "不能为空", trigger: "blur"}],
        issuedAmount: [{required: true, message: "不能为空", trigger: "blur"}],
        promptDate: [{required: true, message: "不能为空", trigger: "change"}],
      },
      pickerOptions:{
        // 时间不能大于当前时间
        disabledDate: (time) => {
          console.log(this.submitParams.issuedDate)
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    };
  },
  created() {
    query().then((res) => {
      this.$set(this.submitParams, "issuedBrname", res.result.issuedBrname);
      this.$set(this.submitParams, "issuedBrno", res.result.issuedBrno);
      this.$set(this.submitParams, "issuedDate", milliSendToDate(new Date()));
      this.queryData = res.result;
    });
  },
  mounted() {
  },

  methods: {
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          if (this.submitParams.issuedDate !== null && this.submitParams.issuedDate !== "" && (this.submitParams.promptDate < this.submitParams.issuedDate)) {
            this.$message({
              showClose: true,
              message: '提示付款日期不能小于出票日期',
              type: 'warning'
            });
            this.submitParams.promptDate = null;
            return;
          }
          this.loading = true;
          submit(this.submitParams)
            .then((response) => {
              this.msgSuccess("提交成功");
              this.loading = false;
              this.isSubmit = true;
              this.disabled = true;
            })
            .catch((err) => {
              this.$set(this.rules.stBrno[0], "required", true);
              this.$set(this.rules.stBrnoName[0], "required", true);
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      this.isSubmit = false;
      this.disabled = false;
      this.$set(this.submitParams, "issuedBrname", this.queryData.issuedBrname);
      this.$set(this.submitParams, "issuedBrno", this.queryData.issuedBrno);
      this.$set(this.submitParams, "issuedDate", milliSendToDate(new Date()));
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      if (fromFlag == "issuedBrno") {
        this.$set(this.submitParams, "issuedBrno", row.bankCode);
        this.$set(this.submitParams, "issuedBrname", row.orgFullname);
      } else if (fromFlag == "agentBrno") {
        this.$set(this.submitParams, "agentBrno", row.bankCode);
        this.$set(this.submitParams, "agentBrname", row.orgFullname);
      }
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },

    //回车取行号信息
    getBankInf(searchType, bankCode) {
      getBankInfByBankCode(bankCode).then((response) => {
        if (response.code == "S" && response.result !== undefined) {
          switch (searchType) {
            case "issuedBrno":
              this.$set(this.submitParams, "issuedBrno", response.result.bankCode);
              this.$set(this.submitParams, "issuedBrname", response.result.orgFullname);
              break;
            case "agentBrno":
              this.$set(this.submitParams, "agentBrno", response.result.bankCode);
              this.$set(this.submitParams, "agentBrname", response.result.orgFullname);
              break;
          }
        } else {
          this.msgError("查无此行号");
          switch (searchType) {
            case "issuedBrno":
              this.$set(this.submitParams, "issuedBrname", null);
              break;
            case "agentBrno":
              this.$set(this.submitParams, "agentBrname", null);
              break;
          }
        }
      });
    },

    getActNoInfo() {
        var actNo = this.submitParams.issuedActno;
        getCustByActno(actNo).then((response) => {
          if (response.code == "S" && response.result !== null) {
            this.$set(this.submitParams, "issuedActno", response.result.actNo);
            this.$set(this.submitParams, "issuedName", response.result.name);
          } else {
            this.msgSuccess("查无此账号");
            this.$set(this.form, "issuedName", null);
          }
        });
    },

    openPayerDialog(fromFlag = "") {
      this.$refs.payerDialog.show(fromFlag);
    },
    confirmPayer(fromFlag, row) {
      if (fromFlag == "issuedActno") {
        this.$set(this.submitParams, "issuedActno", row.actNo);
        this.$set(this.submitParams, "issuedName", row.name);
      }
    },

    closeFn() {
      this.open = false;
      this.refresh();
    },
    show() {
      this.open = true;
    },
  },
};
</script>
<style>
.dialog-footer {
  margin: 10px 0;
  text-align: center;
}
</style>
